<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      width="25%"
      top="20vh"
      title="新增"
      @close="close"
      :close-on-click-modal="false"
    >
      <el-form :model="formData" :rules="rules" ref="ruleFormRef">
        <el-form-item label="推送名称" label-width="80px" prop="app_name">
          <el-input
            v-model="formData.app_name"
            autocomplete="off"
            placeholder="请输入推送名称"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="推送key" label-width="80px" prop="app_key">
          <el-input
            v-model="formData.app_key"
            autocomplete="off"
            placeholder="请输入推送key"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="推送地址" label-width="80px" prop="api_url">
          <el-input
            v-model="formData.api_url"
            autocomplete="off"
            placeholder="请输入推送地址"
            :spellcheck="false"
          />
        </el-form-item>
        <el-form-item label="接收项目" label-width="80px" prop="topics">
          <el-select
            v-model="topics"
            style="width: 100%"
            multiple
            clearable
            popper-class="custom-header"
            placeholder="请选择推送项目"
          >
            <div class="check_Box">
              <el-checkbox
                v-model="checkAll"
                :indeterminate="indeterminate"
                @change="handleCheckAll"
              >
                全部选项
              </el-checkbox>
            </div>
            <el-option
              v-for="item in porps.subscription"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="说明" label-width="80px">
          <el-input
            v-model="formData.remark"
            autocomplete="off"
            placeholder="请输入说明"
            :spellcheck="false"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import type { CheckboxValueType } from "element-plus";
import { optionsT, HttpPushForm, Rules } from "@/type/system";
import type { FormInstance } from "element-plus";
import { addSubscription, editSubscription } from "@/api/system";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref<any>(true);
const porps = defineProps<{
  subscription: optionsT[];
  editData: HttpPushForm;
}>();
const emit = defineEmits(["closePopUps"]);
const checkAll = ref(false);
const indeterminate = ref(false);
const topics = ref<CheckboxValueType[]>([]);
const ruleFormRef = ref<FormInstance>();
const formData = reactive<HttpPushForm>({
  app_name: "",
  app_key: "",
  api_url: "",
  remark: "",
  topics: [],
  id: null
});
onMounted(() => {
  if (porps.editData) {
    for (const key in porps.editData) {
      for (const keys in formData) {
        if (key === keys) {
          formData[keys] = porps.editData[keys];
        }
      }
    }
    topics.value = formData.topics;
  }
});
const rules = reactive<Rules>({
  app_name: [
    {
      required: true,
      message: "请输入推送名称",
      trigger: "change"
    }
  ],
  app_key: [
    {
      required: true,
      message: "请输入推送key",
      trigger: "change"
    }
  ],
  api_url: [
    {
      required: true,
      message: "请输入推送地址",
      trigger: "change"
    }
  ],
  topics: [
    {
      required: true,
      message: "请选择推送项目",
      trigger: "change"
    }
  ]
});
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      if (porps.editData) {
        edit();
      } else {
        addAsk();
      }
    }
  });
};

const edit = async () => {
  const res = await editSubscription(formData);
  if (res.code === 0) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  } else {
    ElMessage.error(res.message);
  }
};

const addAsk = async () => {
  const res = await addSubscription(formData);
  if (res.code === 0) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  } else {
    ElMessage.error(res.message);
  }
};

const close = () => {
  emit("closePopUps");
};

watch(topics, val => {
  formData.topics = topics.value;
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === porps.subscription.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false;
  if (val) {
    topics.value = porps.subscription.map(_ => _.value);
  } else {
    topics.value = [];
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  font-weight: 550;
}

::v-deep .el-dialog__body {
  padding: 8px 18px 0;
}

.check_Box {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 0 0 5px;
  line-height: 30px;
  border-bottom: 1px solid #dcdfe6;
}
</style>
